<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="keywords"
      content="芋道管理系统 基于 vue3 + CompositionAPI + typescript + vite3 + element plus 的后台开源免费管理系统！"
    />
    <meta
      name="description"
      content="芋道管理系统 基于 vue3 + CompositionAPI + typescript + vite3 + element plus 的后台开源免费管理系统！"
    />
    <title>%VITE_APP_TITLE%</title>
  </head>
  <body>
    <div id="app">
      <style>
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }

        body {
          background: #171930;
          overflow: hidden;
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        .app-loading {
          display: flex;
          width: 100vw;
          height: 100vh;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          background: #171930;
          position: relative;
        }

        .app-loading-wrap {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          animation: fadeIn 1s ease-out;
        }

        .app-loading-title {
          margin-bottom: 60px;
          font-size: 28px;
          font-weight: 400;
          text-align: center;
          color: #ffffff;
          letter-spacing: 1px;
        }

        /* 现代渐变加载器 */
        .spinner {
          width: 50px;
          aspect-ratio: 1;
          position: relative;
        }

        .spinner::before {
          content: '';
          position: absolute;
          inset: 0;
          border-radius: 50%;
          --c: #0000, #ffffff 1deg 120deg, #0000 121deg;
          background:
            conic-gradient(from 0deg, var(--c)) top right,
            conic-gradient(from 120deg, var(--c)) bottom,
            conic-gradient(from 240deg, var(--c)) top left;
          background-size: 50px 50px;
          background-repeat: no-repeat;
          animation: modernSpin 2s infinite cubic-bezier(0.3, 1, 0, 1);
        }

        .loading-text {
          margin-top: 20px;
          font-size: 14px;
          color: rgba(255, 255, 255, 0.8);
          font-weight: 300;
          letter-spacing: 0.5px;
          animation: fadeIn 0.8s ease-out 0.5s both;
        }

        @keyframes fadeIn {
          0% {
            opacity: 0;
            transform: translateY(20px);
          }
          100% {
            opacity: 1;
            transform: translateY(0);
          }
        }

        @keyframes spin {
          0% {
            transform: rotate(0deg);
          }
          100% {
            transform: rotate(360deg);
          }
        }

        @keyframes modernSpin {
          33% {
            inset: -8px;
            transform: rotate(0deg);
          }
          66% {
            inset: -8px;
            transform: rotate(180deg);
          }
          100% {
            inset: 0;
            transform: rotate(180deg);
          }
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
          .app-loading-title {
            font-size: 24px;
            margin-bottom: 50px;
          }

          .spinner {
            width: 40px;
          }

          .spinner::before {
            background-size: 40px 40px;
          }

          .loading-text {
            font-size: 12px;
            margin-top: 15px;
          }
        }
      </style>
      <div class="app-loading">
        <div class="app-loading-wrap">
          <!-- <div class="app-loading-title">%VITE_APP_TITLE%</div> -->
          <div class="spinner"></div>
          <div class="loading-text">系统启动中...</div>
        </div>
      </div>
    </div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
